<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- form标签、input标签、label标签、select标签、textarea标签、无语义标签div和span-->
     
    <!-- form表单（域），描述了要把数据按照什么方式, 提交到哪个页面中，用于向某个页面或者服务器提交参数 -->
    <!-- input标签，type：text、password、radio、checkbox、button、submit、reset、file-->
    <form action="">
        账户<input type="text">
        <br/>
        密码<input type="password">
        <br/>
        性别 <!-- 性别要实现单选，必须name相同，-->
        男<input type="radio" name="sex" checked="checked"> <!-- checked表示默认选择男-->
        女<input type="radio" name="sex">
        <br/>
        爱好
        <input type="checkbox">篮球 <input type="checkbox">游泳 <input type="checkbox">吃饭
        <br/>
        <input type="button" value="这是一个普通按钮" onclick="alert('hello')">
        <input type="submit" value="这是一个提交按钮"> <!-- get方法进行url提参-->
        <br/>
        姓名<input type="text"> <input type="reset">
        <br/>
        <input type="file">
    </form>


    
    <!-- label标签，搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验-->
    <!-- label标签需要for属性，指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)-->
    <br/> <!-- label标签就相当于将之前input前的文本也赋予了点击功能-->
    性别 <!-- 性别要实现单选，必须name相同，-->
    <label for="male">男</label><input type="radio" name="sex" id="male" checked="checked"> <!-- checked表示默认选择男-->
    <label for="female">女</label><input type="radio" name="sex" id="female">
    <br/>


    <!-- select标签，选择标签，需要option标签搭配使用-->
    <select>
        <option>选择年份</option>
        <option value="" selected="selected">2025</option> <!-- selected默认选择-->
        <option value="">2026</option>
        <option value="">2027</option>
        <option value="">2028</option>
    </select>
    <br/>

    <!-- textarea 文本域标签，标签中的内容就是默认内容-->
    <textarea rows="3" cols="20">
    这是文本域的默认内容
    </textarea>


    <!--无语义标签div和span 就是两个盒子. 用于网页布局, div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子-->
    <div>
        <span>你好</span>
        <span>你好</span>
        <span>你好</span>
    </div>
    <div>
        <span>你好</span>
        <span>你好</span>
        <span>你好</span>
    </div>
    <span>不好</span>
    <span>不好</span>
    
</body>
</html>